<template>
	<div class="bread-box">
		<div class="left-arrow">
			<img src="../assets/img/arrow_left.png" alt="" />
		</div>

		<div class="title">首页</div>
		<div class="item">
			<div class="page-item">
				<span>旅游决策分析 — 景点综合分析</span>
				<img src="../assets/img/close.png" alt="" />
			</div>
		</div>
		<div class="right-arrow">
			<img src="../assets/img/arrow_right.png" alt="" />
		</div>

		<el-dropdown>
			<span class="closebtn">
				关闭操作
				<img src="../assets/img/arrow_down.png" alt="" style="vertical-align: middle" />
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item>操作1</el-dropdown-item>
				<el-dropdown-item>操作1</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>

		<div class="quit">
			<img src="../assets/img/pquit.png" alt="" />
			<span>退出</span>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},

	mounted() {},

	methods: {},
};
</script>

<style lang="scss" scoped>
.bread-box {
	padding: 0 10px;
	width: 100%;
	height: 40px;
	border-radius: 20px;
	box-shadow: 0.16px 3px 16px 0px rgba(27, 98, 140, 0.1);
	background: #ffffff;
	display: flex;
	align-items: center;

	.left-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 10px;
		height: 40px;
	}

	.right-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		height: 40px;
		border-left: 1px solid #ebecef;
		border-right: 1px solid #ebecef;
	}

	.title {
		padding: 0 10px;
		height: 40px;
		line-height: 40px;
		border-left: 1px solid #ebecef;
		border-right: 1px solid #ebecef;
		font-size: 16px;
		font-family: SourceHanSansCN;
		font-weight: normal;
		color: #999999;
	}

	.item {
		flex: 1;
		display: flex;
		flex-wrap: nowrap;
		overflow: auto;

		.page-item {
			padding: 0 10px;
			height: 40px;
			font-size: 16px;
			font-family: SourceHanSansCN;
			font-weight: normal;
			color: rgb(50, 65, 87);
			line-height: 40px;
			border-right: 1px solid #ebecef;
			img {
				margin-left: 10px;
				cursor: pointer;
			}
		}
	}

	.closebtn {
		padding: 0 20px;
	}

	.quit {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 1px solid #ebecef;
		padding: 0 15px;
		cursor: pointer;
	}
}
</style>
